<template>
  <view>
    <view class="navbar">
      <uni-nav-bar fixed="true" :border="false" color="#FFF" statusBar="true" backgroundColor="#22b9a3"
        :title="title" />
    </view>
    <view class="container">
      <view v-show="'order' == activeTab">
        <staffOrder></staffOrder>
      </view>
      <view v-show="'mine' == activeTab">
        <staffMine></staffMine>
      </view>
    </view>
    <view class="main-home-tabbar">
      <view class="tabbar-item" :class="'home' == activeTab ? 'active' : ''" @click="handleTabBar('order')">
        <view class="item-icon">
          <image class="img"
            :src="'order' == activeTab ? '/static/images/tabbar/order-select.png' : '/static/images/tabbar/order.png'"
            lazy-load="true"></image>
        </view>
        <view class="item-text">订单</view>
      </view>
      <view class="tabbar-item" :class="'mine' == activeTab ? 'active' : ''" @click="handleTabBar('mine')">
        <view class="item-icon">
          <image class="img"
            :src="'mine' == activeTab ? '/static/images/tabbar/personal-select.png' : '/static/images/tabbar/personal.png'"
            lazy-load="true"></image>
        </view>
        <view class="item-text">我的</view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import staffOrder from '@/pages/staff/staff-order/staff-order.vue';
  import staffMine from '@/pages/staff/staff-mine/staff-mine.vue';
  import {
    ref
  } from 'vue'
  const activeTab = ref('order')
  const title = ref('接诊订单')

  function handleTabBar(tab) {
    activeTab.value = tab;
    if (tab == 'order') {
      title.value = '接诊订单'
    } else {
      title.value = '个人中心'
    }
  }
</script>

<style scoped lang="scss">
  .navbar ::v-deep .uni-nav-bar-text {
    font-size: 35rpx !important;
    font-family: "siyuan";
  }

  .main-home-tabbar {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 50px;
    display: flex;
    background: #fff;
    border-top: 1px solid #ddd;
    z-index: 100;
    padding: 4px 0 0px;

    .tabbar-item {
      width: 50%;
      text-align: center;

      .item-icon {
        text-align: center;
        height: 26px;

        .img {
          width: 25px;
          height: 25px;
        }
      }

      .item-text {
        height: 20px;
        text-align: center;
        font-size: 14px;
      }

      &.active {
        .item-text {
          color: #22b9a3;
        }
      }
    }
  }
</style>